<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="list">
      <view class="item" v-for="(item,index) in list" :key="index" @longpress="longClick(item)" @click="goDetail(item)">
        <view class="avatar">
          <image :src="setUrl(item.sender.avatar)" class="img" mode="aspectFill"></image>
        </view>
        <view class="right">
          <view class="title">
            【{{ item.sender.nickname }}】  赞了： <text class="desc">{{ item.content }}</text>
          </view>
          <view class="foot">
            <view class="time">{{ item.createtime }}</view>
            <view class="group" v-if="item.association">{{ item.association.name }}</view>
          </view>
        </view>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    </view>
    
    <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222' @confirm="confirm">
      <view style="text-align: center;">是否确认删除该信息</view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { post } from '@/api';
import { loading, setUrl } from '@/common';

const modal = ref(null);

let rows = {};
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad(() => {
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})

function getList(){
  const params = {
    page,
    limit,
    target_type: 0
  }
  post('api/message_praise/getMessageList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      let ids = [];
      data.data.forEach(e => {
        ids.push(e.id);
        e.createtime = uni.$uv.timeFormat(e.createtime, 'yyyy-mm-dd hh-MM');
        e.examine_time = uni.$uv.timeFormat(e.examine_time, 'yyyy-mm-dd-')
      })
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function confirm(){
  const params = {
    message_id: rows.id,
    type: 2
  }
  post('api/message/delMessage', params).then(res => {
    if(res.code == 1){
      page = 1;
      list.value = [];
      getList();
    }
  })
}
function longClick(row){
  rows = uni.$uv.deepClone(row);
  modal.value.open();
}
function goDetail(row){
  if(row.target_type == 1){
    uni.navigateTo({
      url: `/pages/group/themeDetail?id=${row.target_id}`
    });
  }else{
    uni.navigateTo({
      url: `/pages/dynamic/detail?id=${row.target_id}`
    });
  }
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    .item{
      padding: 46rpx 0;
      border-bottom: 1px solid rgba($color: #979797, $alpha: .3);
      display: flex;
      align-items: flex-start;
      &:last-child{
        border-bottom: 0;
      }
      .right{
        position: relative;
        padding-left: 26rpx;
        flex: 1;
        width: 0;
        .foot{
          padding-top: 16rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time, .group{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
        }
        .title{
          font-weight: 400;
          font-size: 26rpx;
          color: #E43222;
          padding-top: 10rpx;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          .desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            padding-top: 14rpx;
          }
        }
      }
      .avatar{
        width: 79rpx;
        height: 79rpx;
        .img{
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F0F0F0;
  }
</style>